<template>
	<view class="outer_box">
		<view v-if="isNull" class="cart_null">
			<image src="../../static/lipdee/cart_null.png" mode=""></image>
			<text>购物车空空如也~</text>
			<button class="btn-shop-list" @tap="shopList()">去逛逛</button>
		</view>
		<view class="" v-if="!isNull">
			<scroll-view scroll-y="true" :style="{height:height+'px'}">
				<view class="" v-for="(item,index) in cartList1" :key="index">
					<!-- 商家标题 -->
					<view class="shop-title">
						<view class="" @tap="_seletedAll(item.flag,index)">
							<image v-if="item.flag==true" src="https://xb-street.oss-cn-shanghai.aliyuncs.com/smallshop/static/shopingCart/xuanzhong.png" mode=""></image>
							<image v-if="item.flag==false" src="https://xb-street.oss-cn-shanghai.aliyuncs.com/smallshop/static/shopingCart/weixuan.png" mode=""></image>
						</view>
						<shopTitle :content="item.shopName" :color="'#333333'" class="title" @tap="openShopInfo(item.shopId)">
							<view class="">
								已满80包邮
							</view>
						</shopTitle>
					
					</view>
					<checkbox-group @change="seletedStatus(index,item.data.length,$event)" checked>
						<view class="d-flex mt-1 product-box" v-for="(v,i) in item.data" :key="i">
							<label :class="v.flag==true?'aa':'bb'">
								<checkbox  :value="String(i)" :key="i" :checked="v.flag" hidden='true' color="#FFCC33" style="transform:scale(0.7);">
								</checkbox>
							</label>
							<productInfo class="productInfo" :productInfo="v">
								<number slot='number-btn':num="v"></number>
								<view slot='sku' class="sku"></view>
							</productInfo>
						</view>
					</checkbox-group>
					<!-- <view class="product-box" v-for="(v,i) in item.data" :key="i">
						<view class="" @tap="seletedStatus(index,item.data.length,$event)">
							<image v-if="v.flag==true" src="https://xb-street.oss-cn-shanghai.aliyuncs.com/smallshop/static/shopingCart/xuanzhong.png" mode=""></image>
							<image v-if="v.flag==false" src="https://xb-street.oss-cn-shanghai.aliyuncs.com/smallshop/static/shopingCart/weixuan.png" mode=""></image>
						</view>
						<productInfo class="productInfo" :productInfo="v">
							<number slot='number-btn':num="v"></number>
							<view slot='sku' class="sku">1000g</view>
						</productInfo>
					</view> -->
				</view>
				<!-- <view class="line"></view> -->
			</scroll-view>
			<view class="pay-box">
				<view class="choose">
					<view class="" v-if="isShow==true" @tap="chooseAll()">
						<image src="https://xb-street.oss-cn-shanghai.aliyuncs.com/smallshop/static/shopingCart/xuanzhong.png" mode=""></image>
					</view>
					<view class="" v-else  @tap="chooseAll()">
						<image src="https://xb-street.oss-cn-shanghai.aliyuncs.com/smallshop/static/shopingCart/weixuan.png" mode=""></image>
					</view>
					<view class="">全选</view>
				</view>
				<view class="money">
					<view class="">合计：</view>
					<view class="">￥{{(price/100).toFixed(2)}}</view>
					<view class="" @tap="openAffirmOrder">去结算</view>
				</view>
			</view>
			
		</view>	
		<wybpopup ref="popup" type='bottom'>
			<view class="popup">
				<view class="popup_top item">
					<view class="">
						相伴测试专用商家
					</view>
					<view class="">
						￥ {{(price/100).toFixed(2)}}
					</view>
				</view>
				<view class="popup_top">
					<view class="">
						支付方式
					</view>
					<view class="">
						会员余额：{{userInfo.userInfo.money}}
					</view>
				</view>
				<view class="line">
					
				</view>
				<view class="popup_pay">
					<!-- <view class="pay_c"> -->
						<view class="">
							需付款
						</view>
						<view class="">
							￥{{(price/100).toFixed(2)}}
						</view>
					<!-- </view> -->
				</view>
				<button class="paymentBtn" type="default" @tap='payment1()'>
					支付
				</button>
			</view>
		
		</wybpopup>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import wybpopup from '@/components/wyb-popup/wyb-popup.vue'
	export default {
		components: {
			wybpopup
		},
		data() {
			return {
				isShow:false,
				isNull:false,
				height: 500,
				cartList1:'',
				price:'',
				// productInfo: [{
				// 	title: '进口苹果',
				// 	image: 'https://xb-street.oss-cn-shanghai.aliyuncs.com/smallshop/static/login/logo.png',
				// 	sku: '1000g',
				// 	price: '30'
				// },
				// {
				// 	title: '进口香蕉',
				// 	image: 'https://xb-street.oss-cn-shanghai.aliyuncs.com/smallshop/static/login/logo.png',
				// 	sku: '1000g',
				// 	price: '30'
				// }]
			}
		},
		onReady() {
			uni.getSystemInfo({
				success: (res) => {
					this.height = res.windowHeight - uni.upx2px(120)
				}
			})
		},
		onShow() {
			this.getUserInfo()
				this.getCartList()
				this.isShow = false
				this.close()
		
		},
		onLoad() {
			// this.getCartList()
		},
		computed: mapState(['userInfo','loginState']),
		methods: {
			...mapMutations(['login', 'logout','setUserInfo']),
			shopList(){
				uni.switchTab({
					url:'../index/index'
				})
			},
			payment1(){
				const parameter = {
					ids: [],
					dispatching: [], //数据传输使用 不参与后端交互
					isDispatching: '',
					shop: []
				}
				for (var i = 0; i < this.cartList1.length; i++) {
					for (var j = 0; j < this.cartList1[i].data.length; j++) {
						if (this.cartList1[i].data[j].flag) {
							parameter.ids.push(this.cartList1[i].data[j].goodsId)
							parameter.dispatching.push(this.cartList1[i].isDispatching)
							parameter.shop.push(this.cartList1[i].data[j].shopId)
						}
				
					}
				}
				let type=3
				// if(this.current===0){
				// 	type=1
				// }
				// if(this.current===1){
				// 	type=2
				// }
				parameter.isDispatching = -1
				this.$api.subOrder(parameter).then((res) => {
					// uni.hideLoading()
					console.log(JSON.stringify("0099999" + res))
					if (res.data.code == 200) {
						//订单提交成功 开始支付
						const parameter = {
							"orderNo": res.data.data.orderNumber
						}
						this.payOrder(parameter,type)
					} else {
						uni.showToast({
							title: res.data.msg,
							duration: 1000,
							icon: "none"
						});
					}
				})
			},
			uniq(array) {
				var temp = []; //一个新的临时数组
				for (var i = 0; i < array.length; i++) {
					if (temp.indexOf(array[i]) == -1) {
						temp.push(array[i]);
					}
				}
				return temp;
			},
			//订单支付
			payOrder(parameter,type) {
				parameter.type=type
				this.$api.payOrder(parameter).then((res) => {
					// this.price = 0
					if(type==3){ //余额支付
						if (res.data.code == 200) {
							uni.showToast({
								title: '支付成功',
								duration: 1000,
								icon: "none"
							});
							this.close()
							this.getCartList()
							setTimeout(function() {
								uni.navigateTo({
									url: '../order/paysuccess'
								});
							}, 1200);
						
						} else {
							uni.showToast({
								title: res.data.msg,
								duration: 1000,
								icon: "none"
							});
							this.close()
							setTimeout(function() {
								uni.navigateTo({
									url: '../member/toUp',
									success: res => {},
									fail: () => {},
									complete: () => {}
								});
						
							}, 1000);
						}
						
					}

					
				})
			
			},
			// 获取用户信息
			getUserInfo() {
				this.$api_http.getUserInfo().then((res) => {
					let userInfo = res.data.dataMap
					// this.getUserIn = res.data.dataMap
					console.log(userInfo)
					if (userInfo.uid != null) {
						this.setUserInfo(userInfo)
					}
			
				})
			
			},
			open() {
				this.$refs.popup.show()
			},
			close() {
				this.$refs.popup.hide()
			},
			openAffirmOrder() {
				if(this.userInfo.userInfo.flag == 3){//是会员
					// debugger
					let _this = this
					const parameter = {
						ids: [],
						dispatching: [], //数据传输使用 不参与后端交互
						isDispatching: '',
						shop: []
					}
					for (var i = 0; i < this.cartList1.length; i++) {
						for (var j = 0; j < this.cartList1[i].data.length; j++) {
							if (this.cartList1[i].data[j].flag) {
								parameter.ids.push(this.cartList1[i].data[j].goodsId)
								parameter.dispatching.push(this.cartList1[i].isDispatching)
								parameter.shop.push(this.cartList1[i].data[j].shopId)
								// parameter.dispatching.push(this.cartList1[i].isDispatching)
								// console.log(JSON.stringify("000000"+JSON.stringify()))
							}
								
						}
					}
					if (parameter.ids.length < 1) {
						uni.showToast({
							title: '请选择要结算的商品',
							duration: 1000,
							icon: "none"
						});
						return
					}
					let isDispatching = _this.uniq(parameter.dispatching)
					if (isDispatching.length > 1) {
						uni.showToast({
							title: '商家类型不同，不能同时结算！',
							duration: 2000,
							icon: "none"
						});
						return
					}
					if (isDispatching[0] == -1) {//服务型  直接支付
						_this.open()
						// uni.hideTabBar(); 
					}
					if (isDispatching[0] == 1 || isDispatching[0] == 2) {//产品型 跳页面支付
						let shop = _this.uniq(parameter.shop)
						if (shop.length > 1) {
							uni.showToast({
								title: '配送商家不能同时结算！',
								duration: 2000,
								icon: "none"
							});
							return
						}
						console.log(shop[0])
						//验证数组大小
						uni.navigateTo({
							url: '../order/affirmOrder?shopId=' + shop[0] + '&goodsIds=' +
								JSON.stringify(parameter.ids)+'&type='+2
						});
						return
					
					} 
				}else if(this.userInfo.userInfo.flag == 1){//未开通会员
					uni.showModal({
							title: '提示',
							content: '您现在还未开通会员，请前往开通会员',
							success: (res)=> {
							if (res.confirm) {
								uni.navigateTo({
									url:'../member/openMember'
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
								}
						 }
					});
				}else if(this.userInfo.userInfo.flag == 2){//会员过期
					uni.showModal({
							title: '提示',
							content: '会员已过期，请前往充值',
							success: (res)=> {
							if (res.confirm) {
								uni.navigateTo({
									url:'../member/toUp'
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
								}
						 }
					});
				}
				
			
			},
			uniq(array) {
				// debugger
				var temp = []; //一个新的临时数组
				for (var i = 0; i < array.length; i++) {
					if (temp.indexOf(array[i]) == -1) {
						temp.push(array[i]);
					}
				}
				return temp;
			},
			openShopInfo(shopId){
				uni.navigateTo({
					url:'../shop/shopInfo?shopId='+shopId
				})
			},
			// openAffirmOrder() {
			// 	uni.navigateTo({
			// 		url: '../order/affirmOrder'
			// 	})
			// },
			getCartList() {
				// this.cartList1 = ''
				this.$api.getCartList({}).then((res) => {
					if (res.statusCode == 200) {
						this.cartList1 = res.data.data
						this.price = 0
						uni.hideLoading()
						this.isNull = this.cartList1.length == 0 ? true : false
					}
				})
			},
			addSubtractProduct(status, item, index) {
				this.$api.addSubtractProduct({
					goodsId: item.goodsId,
					status: status
				}).then((res) => {
					console.log(JSON.stringify(res))
					if (res.statusCode == 200 && res.data.code == 200) {
						// this.getCartList()
						console.log(item)
						for (var i = 0; i < this.cartList1.length; i++) {
							if (this.cartList1[i].shopId == item.shopId) {
								for (var j = 0; j < this.cartList1[i].data.length; j++) {
									if (this.cartList1[i].data[j].goodsId == item.goodsId) {
										this.cartList1[i].data[j].number = this.cartList1[i].data[j].number +
											Number(status)
										console.log("====" + JSON.stringify(this.cartList1[i].data[j].number))
										if (this.cartList1[i].data[j].number == 0) {
											this.cartList1[i].data.splice(j, 1) //移除商品
											if (this.cartList1[i].data == '') {
												this.totalPrice()
												this.cartList1.splice(i, 1)
												this.isNull = this.cartList1.length == 0 ? true : false
											}
											// console.log(JSON.stringify(this.cartList1[i].data))
										}
									}
			
								}
			
							}
						}
						this.totalPrice()
					}
				})
			
			},
			//价格统计
			totalPrice() {
				let price = 0
				for (var i = 0; i < this.cartList1.length; i++) {
					for (let j = 0; j < this.cartList1[i].data.length; j++) {
						if (this.cartList1[i].data[j].flag) {
							let data = this.cartList1[i].data[j];
							price = price + Number(data.goodsPrice) * 100 * data.number
						}
					}
				}
				this.price = price
				console.log("选中价格：" + price)
			},
			seletedStatus(index, length, e) {
				console.log("索引===：" + index)
				// console.log("数组长度：" + length)
				console.log('所选esuoyin==：' + JSON.stringify(e.detail.value))
				// console.log('pppp'+.length)
				console.log('dddd' + e.detail.value.length)
				for (var i = 0; i < this.cartList1[index].data.length; i++) {
					// this.cartList1[index].data[i]
					if (e.detail.value.includes(String(i))) {
						if (!this.cartList1[index].data[i].flag) {
							this.cartList1[index].data[i].flag = true
							// debugger
							console.log('1111111'+this.cartList1[index].data[i].goodsPrice)
							this.price = this.price + parseFloat(this.cartList1[index].data[i].goodsPrice) * parseInt(this
								.cartList1[index].data[i].number)* 100
						}
					} else {
						if (this.cartList1[index].data[i].flag) {
							console.log("====局部修复===")
							this.cartList1[index].data[i].flag = false
							this.price = Number(this.price) - parseFloat(this.cartList1[index].data[i].goodsPrice) * parseInt(this
								.cartList1[index].data[i].number)* 100
						}
					}
				}
			
			
				if (length == e.detail.value.length) {
					this.cartList1[index].flag = true
				} else {
					this.cartList1[index].flag = false
				}
				console.log('------:' + JSON.stringify(this.cartList1))
				this.isShow = this.allChooseBtn(this.cartList1)
			
				console.log(this.price)
			},
			allChooseBtn(cartList1){
				console.log(JSON.stringify(cartList1))
				let flag = true
				for (var i = 0; i < cartList1.length; i++) {
					if(!cartList1[i].flag){
						flag = cartList1[i].flag
					}
				}
				return flag;
			},
			_seletedAll(flag, index) {
				console.log(flag)
				console.log(index)
				if (!flag) {
					//勾选
					this.cartList1[index].flag = true
					for (var i = 0; i < this.cartList1[index].data.length; i++) {
						if (!this.cartList1[index].data[i].flag) {
							this.cartList1[index].data[i].flag = true
							this.price = Number(this.price) + parseFloat((this.cartList1[index].data[i].goodsPrice) *parseInt(this.cartList1[index].data[i].number)* 100)
						}
					}
					console.log('选中'+this.price)
			
				} else {
					this.cartList1[index].flag = false
					for (var i = 0; i < this.cartList1[index].data.length; i++) {
						if (this.cartList1[index].data[i].flag) {
							this.cartList1[index].data[i].flag = false
							let nu = parseFloat((this.cartList1[index].data[i].goodsPrice) * parseInt(this.cartList1[index]
								.data[i].number)* 100)
							this.price = Number(this.price) - nu
						}
			
					}
			console.log('取消'+this.price)
			
				}
				this.isShow = this.allChooseBtn(this.cartList1)
				
			},
			//全选
			chooseAll(){
				this.isShow = !this.isShow
				console.log(this.isShow)
				if (this.isShow==true) {
					//勾选
					for (var i = 0; i < this.cartList1.length; i++) {
							if(this.cartList1[i].flag==true){
								this.price = this.price
								for (let j = 0; j < this.cartList1[i].data.length; j++) {
									this.cartList1[i].data[j].flag = true
								}
							}else{
								this.cartList1[i].flag = true
								for (let j = 0; j < this.cartList1[i].data.length; j++) {
									this.cartList1[i].data[j].flag = true
									this.price = Number(this.price) + parseFloat((this.cartList1[i].data[j].goodsPrice) *parseInt(this.cartList1[i].data[j].number)* 100)
								}
							}
						}
					console.log('选中'+this.price)
							
				} else {
					this.price = 0
					for (var i = 0; i < this.cartList1.length; i++) {
							if(this.cartList1[i].flag==true){
								this.cartList1[i].flag = false
								for (let j = 0; j < this.cartList1[i].data.length; j++) {
									this.cartList1[i].data[j].flag = false
								}
							}else{
								for (let j = 0; j < this.cartList1[i].data.length; j++) {
									this.cartList1[i].data[j].flag = false
								}
							}
						}
			    }
				
			}
		}
	}
</script>

<style lang="less" scoped>
	.cart_null {
		display: flex;
		width: 100%;
		flex-direction: column;
	}
	
	.cart_null text {
		margin: 0 auto;
		color: #666666;
	}
	
	.cart_null image {
		margin: 60rpx auto;
		width: 250rpx;
		height: 250rpx;
	}
	.btn-shop-list {
		background: linear-gradient(90deg, #FF8308 0%, #FFBF69 100%);
		border-radius: 50rpx;
		width: 200rpx;
		color: #FFFFFF;
		line-height: 75rpx;
		margin-top: 40rpx;
	}
	.popup{
		width: 750rpx;
		height: 785rpx;
		background: #FFFFFF;
		border-radius: 40rpx 40rpx 0rpx 0rpx;
		overflow: hidden;
		z-index: 9999;
		.popup_top{
			width: 690rpx;
			height: 70rpx;
			margin: 0 auto;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 32rpx;
			font-weight: 400;
			color: #666666;
		}
		.popup_pay{
			width: 750rpx;
			height: 300rpx;
			text-align: center;
			view:nth-child(1){
				margin-top: 100rpx;
				font-size: 32rpx;
				font-weight: 400;
				color: #666666;
			}
			view:nth-child(2){
				font-size: 56rpx;
				font-weight: 400;
				color: #FF8308;
			}
		}
		.item{
			margin-top: 30rpx;
		}
		.line{
			width: 670rpx;
			height: 2rpx;
			background: #EEEEEE;
			border-radius: 1rpx;
			margin-top: 30rpx;
		}
		.paymentBtn{
			background-color: #FF8308 ;
			width: 520rpx;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			font-size: 32rpx;
			font-weight: 500;
			color: #FFFFFF;
			border-radius: 45rpx;
		}
	}
	.aa{
		width: 56rpx;
		height: 50rpx;
		background: url(https://xb-street.oss-cn-shanghai.aliyuncs.com/smallshop/static/shopingCart/xuanzhong.png) no-repeat;
		background-size: cover;
	}
	.bb{
		width: 56rpx;
		height: 50rpx;
		background: url(https://xb-street.oss-cn-shanghai.aliyuncs.com/smallshop/static/shopingCart/weixuan.png) no-repeat;
		background-size: cover;
	}
	.list_checkbox{
		// margin-left: 30rpx;
		// border:1px solid red;
	}
	.d-flex{
		display: flex;
		align-items: center;
	}
	.outer_box {
		display: flex;
		flex-direction: column;
		flex: 1;

		.line {
			margin: 10rpx auto;
			width: 90%;
			height: 2rpx;
			background-color: #EEEEEE;
		}

		.pay-box {
			display: flex;
			margin: 4rpx 0;
			height: 110rpx;
			width: 100%;
			box-shadow: 0px -1px 0px 0px #EEEEEE;
			border-bottom: 2rpx solid #EEEEEE;

			.choose {
				margin-left: 30rpx;
				display: flex;
				flex: 1;
				align-items: center;

				view:first-child {
					display: flex;
					align-items: center;
				}

				view:last-child {
					font-size: 24rpx;
					color: #333;
					margin-left: 30rpx;
				}
			}

			.money {
				display: flex;
				flex: 3;
				align-items: center;
				justify-content: space-between;
				margin-right: 20rpx;

				view:nth-child(1) {
					font-weight: 400;
					color: #999999;
					font-size: 24rpx;
				}

				view:nth-child(2) {
					margin-left: -100rpx;
					font-weight: bold;
					color: #FF8308;
					font-size: 36rpx;
				}

				view:nth-child(3) {
					color: #fff;
					height: 80rpx;
					width: 220rpx;
					border-radius: 50rpx;
					line-height: 80rpx;
					text-align: center;
					background: linear-gradient(90deg, #FF8308 0%, #FFBF69 100%);
				}
			}

			image {
				width: 48rpx;
				height: 48rpx;
			}
		}

		.product-box {
			display: flex;
			margin: 4rpx 10rpx 4rpx 30rpx;

			view:nth-child(1) {
				display: flex;
				align-items: center;
			}

			.productInfo {
				width: 100%;
				margin-left: 15rpx;
				.sku {
					color: #999999;
					font-size: 24rpx;
				}
			}

			image {
				margin-right: 20rpx;
				width: 48rpx;
				height: 48rpx;
			}
		}

		.shop-title {
			margin: 20rpx 30rpx;
			display: flex;
			align-items: center;

			.title {
				view {
					font-weight: 400;
					color: #666666;
				}
			}

			view:nth-child(1) {
				display: flex;
				align-items: center;
				margin-right: 20rpx;

				image {
					width: 48rpx;
					height: 48rpx;
				}
			}
		}


	}
</style>
